<template>
	<view class="orderPage">
		<view class="orderPage_top">
				<view class="orderPage_top_title">
					订单查询
				</view>
				<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="uForm"
				>
					<u-form-item
							label="手机号码"
							prop="userInfo.phone"
							required
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.phone"
								border="none"
								maxlength="11"
								type='number'
								placeholder="请填写下单的联系手机"
						></u--input>
					</u-form-item>
					<u-form-item
							label="身份证号"
							prop="userInfo.selfphone"
							required
							ref="item1"
							
					>
						<u--input
								v-model="model1.userInfo.selfphone"
								border="none"
								maxlength="18"
								placeholder="请填写身份证号"
						></u--input>
					</u-form-item>
					
				</u--form>
				<view @click="queryOrder" class="orderPage_top_btn">
					查询
				</view>
				<view class="orderPage_top_backbtn">
					<span @click="getBack">返回上一页</span>
				</view>
		</view>
		<view class="orderPage_results" v-if="isquery">
			<p>
				查询结果
			</p>
			<view v-if="list && list.length > 0">
				<view class="orderPage_results_order" v-for="(item , index) in list" :key="index">
					<p v-if="item.phonenum">订购号码：{{item.phonenum}}</p>
					<p v-if="item.express_status">物流状态：{{ item.express_status === 1 ? '已发货' : item.express_status === 2 ? '未发货' : '状态未知' }}</p>
					<p v-if="item.express_no">物流单号：{{item.express_no}}</p>
					<p v-if="item.express_name">物流方式：{{item.express_name}}</p>
					<p v-if="item.open_status">开卡状态：{{ item.open_status === 1 ? '待开卡' : item.open_status === 2 ? '开卡中' : item.open_status === 3 ? '开卡成功' : item.open_status === 4 ? '开卡失败' : item.open_status === 5 ? '开卡异常' :'状态未知' }}</p>
					<p v-if="item.open_status">开卡信息：{{item.open_message}}</p>
				</view>
			</view>
			
			<view class="orderPage_results_noOrder" v-else>
				<image src="../../static/noorder.png" mode=""></image>
				<p>暂无订单</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				model1: {
					userInfo: {
						phone:'',
						selfphone:''
					}
				},
				// 表单验证
				rules: {
					'userInfo.phone': {
						type: 'string',
						max: 11,
						min:11,
						required: true,
						message: '请填写下单的联系手机',
						trigger: ['blur', 'change']
					},
					'userInfo.selfphone': {
						type: 'string',
						// max: 6,
						// min:6,
						len:18,
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
				},
				list:[],
				port:'80',
				isquery:false //是否查询
			}
		},
		onLoad() {
			this.port = window.location.port;
		},
		methods: {
			// 返回上一页
			getBack(){
				uni.navigateBack({
				    delta: 1 // 返回上一页
				});
			},
			// 查询
			queryOrder(){
				this.$refs.uForm.validate().then(res => {
					uni.request({
						url: 'https://5g.ghywkj.com.cn/api/order/select',
						method: 'POST',
						data: {
							phone:this.model1.userInfo.phone,
							id_card:this.model1.userInfo.selfphone 
						},
						success: res => {
							this.isquery = true
							this.list = res.data
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@media screen and (max-width : 750px){
	.orderPage{
		width: 100vw;
	}
}
@media screen and (min-width : 500px){
	.orderPage{
		width: 370px;
		margin: 0 auto;
	}
}
.orderPage_top{
	width: 75%;
	margin: 50rpx auto;
	// /deep/.u-form-item{
	// 	margin-bottom: 15rpx;
	// }
	/deep/.u-form-item__body{
		// margin-bottom: 20rpx;
	}
	/deep/.u-form-item__body__right__message{
		margin-left: 165rpx !important;
	}
	/deep/.u-form-item__body__left{
		width: 80px !important;
		font-weight: 550;
	}
	/deep/.u-form-item__body__left__content__label{
		font-size: 28rpx !important;
	}
	/deep/.u-input__content__field-wrapper__field{
		font-size: 28rpx !important;
	}
	.orderPage_top_title{
		width: 100%;
		height: 80rpx;
		font-size: 36rpx;
		color: #000;
		line-height: 80rpx;
		font-weight: 600;
		text-align: center;
	}
	.orderPage_top_btn{
		width: 100%;
		height: 75rpx;
		color: #fff;
		background-color: #1989fa;
		font-size: 26rpx;
		text-align: center;
		line-height: 75rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}
	.orderPage_top_backbtn{
		width: 100%;
		text-align: center;
		color: #5286ff;
		font-size: 26rpx;
		margin-top: 30rpx;
	}
}
.orderPage_results{
	width: 75%;
	margin: 80rpx auto;
	p{
		text-align: left;
		font-size: 34rpx;
		color: #000;
		font-weight: 600;
	}
	.orderPage_results_order{
		margin-top: 30rpx;
		p{
			text-align: left;
			font-size: 28rpx;
			color: #666666;
			font-weight: 400;
			line-height: 45rpx;
		}
	}
	.orderPage_results_noOrder{
		width: 100%;
		margin-top: 100rpx;
		text-align: center;
		image{
			width: 300rpx;
			height: 200rpx;
		}
		p{
			text-align: center;
			font-size: 28rpx;
			color: #bfbfbf;
		}
	}
}




</style>
